<template>
    <div class="background">
        <div id="myChart" :style="{width: '1500px', height: '500px'}"></div>
    </div>
</template>
<script>
    import {
        ListHots
    } from "@/api/film";
    export default {
        name: 'show',
        data() {
            return {
                total: []
            }
        },
        mounted() {
            //获取热门电影      
            ListHots().then(res => {
                this.total = res.data
                console.log("tolist==", this.total);
            })
            setTimeout(() => {
                this.drawLine()
            }, 100)
        },
        methods: {
            drawLine() {
                //  let hotlist=[]
                //  let movielist=[]
                let hotlist = this.total.map((item) => item.hot)
                let movielist = this.total.map(item => item.name)

                console.log(hotlist);
                console.log(movielist);
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption({
                    barWidth: 60,
                    title: {
                        text: '导演能力评估 '
                    },

                    tooltip: {},
                    legend: {
                        data: ['热度']
                    },
                    xAxis: {
                        name:"导演",
                        type: 'category',
                        data:["王欣", "曹保平"," 金铁木","沈乐平","邹江","张艺谋","彭小莲","李阳","魏晓波","甘露"]
                    },
                    yAxis: {
                        name:"能力值",
                        type: 'value'
                    },
                    series: [{
                        itemStyle: {
                            color: "#FAC858"
                        },
                        data: [8.7,8.0,7.9,7.8,7.7,7.7,7.6,7.5,7,4],
                        type: 'bar',

                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }]
                });
            }
        }
    }
</script>


<style scoped>
    #myChart {
        margin-top: 100px;

    }
   
    .background{
        /* background: red; */
    }
</style>